<template>
  <div>
    <div class="tile is-ancestor">
      <div class="tile is-parent is-8">
        <article class="tile is-child box">
          <h1 class="title">Register</h1>
          <div class="block">
            <div class="control">
              <label class="label">{{$t("message.name")}}</label>
              <p class="control">
                <input v-model="user.loginName" class="input" type="text" placeholder="Text input">
              </p>
              <label class="label">{{$t("message.password")}}</label>
              <p class="control">
                <input v-model="user.password" class="input" type="text" placeholder="Text input">
              </p>
            </div>
            <p class="control">
                <button class="button is-primary" @click="submit" >{{$t("message.submit")}}</button>
            </p>
          </div>
        </article>
      </div>
    </div>
  </div>
</template>

<script>
import Datepicker from 'vue-bulma-datepicker'
export default {
  components: {
    Datepicker
  },
  data: function () {
    return {
      user: {
        loginName: '',
        password: ''
      }
    }
  },
  methods: {
    submit: function () {
      this.$store.dispatch('register', this.$data.user)
      this.$router.push('/login')
    }
  },
  computed: {
    l10n () {
      return {
        firstDayOfWeek: 1,
        weekdays: {
          shorthand: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
          longhand: ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
        },
        months: {
          shorthand: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          longhand: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
